<template>
  <view class="page">
    <view class="content">
      <template v-for="(item, i) in navList" :key="i">
        <view class="item d_flex_b" @click="toStart(item)">
          <view class="word">{{ item.code + "-" + item.name }} </view>
          <view class="mean">{{ item.learnFormName }} </view>
          <view class="right">{{ item.area }}</view>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navList: [],
      curNav: 0,
      schoolCode: "",
      size: 10,
      current: 1,
      total: 10,
    };
  },
  onLoad(options) {
    this.current = 1;
    this.schoolCode = options.schoolCode || "1231242134";
    this.getList();
  },
  onShow() {},
  onReachBottom() {
    if (this.navList.length < this.total) {
      this.current += 1;
      this.getList();
    }
  },
  methods: {
    changeNav(i) {
      this.curNav = i;
      this.getList();
    },
    toStart(item) {
      uni.navigateTo({
        url:
          "/pages/special/schoolSpecial?schoolCode=" +
          this.schoolCode +
          "&specialtyId=" +
          item.id,
      });
    },

    getList() {
      this.$http
        .get1("/client/undergraduate/qrySpecialtys", {
          schoolCode: this.schoolCode,
          
          examType: 12,
        })
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.navList = res.data;
          }
        });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f2f3f8;
}
.page {
  padding: 120rpx 30rpx 200rpx;
  box-sizing: border-box;
}

.content {
  .item {
    width: 100%;
    min-height: 120rpx;
    background: #ffffff;
    box-shadow: 0rpx 4rpx 8rpx 2rpx rgba(42, 65, 152, 0.05);
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    padding: 10rpx 40rpx;
    .word {
      width: 360rpx;
      font-size: 30rpx;
      font-weight: bold;
      color: #333333;
      .word-item {
        background-color: #5480f8;
        border-radius: 1ch;
        margin-right: 12rpx;
        font-size: 24rpx;
        font-weight: 400;
        padding: 4rpx 10rpx;
        margin-top: 10rpx;
      }
    }
    .mean {
      flex: 1;
      // width: 350rpx;
      margin-left: 10rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 24rpx;
      color: #575a64;
    }
    .right {
      width: 100rpx;
      margin-left: 10rpx;
      // overflow: hidden;
      // text-overflow: ellipsis;
      // white-space: nowrap;
      font-size: 24rpx;
      color: #575a64;
    }
  }
}
.page-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 176rpx;
  padding: 30rpx 62rpx;
  box-sizing: border-box;
  background-color: #fff;
  z-index: 10;
  .btn {
    width: 100%;
    height: 90rpx;
    background: #5480f8;
    border-radius: 46rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    font-weight: 500;
    color: #ffffff;
    &.disable {
      background-color: #cad8fc;
    }
  }
}
</style>
